<template>
    <div>
        <el-button type="primary" v-on:click="handleCommand1">English</el-button>
        <el-button type="success" v-on:click="handleCommand2">中文</el-button>
        <div>
            <el-text></el-text>
            <span><svg-icon name="cn" size="128" /></span>
        </div>
        <h2>Element Plus Button</h2>
        <el-button type="default">默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
        <el-button type="warning">警告按钮</el-button>

        <div>
            <h1>elplus 图标</h1>
        </div>
        <div>
            <!-- <Edit /> -->
            <!-- 直接使用 SVG 图标 -->
            <el-icon class="is-loading" color="lightgreen">
                <loading />
            </el-icon>
            <el-icon color="#409efc" class="no-inherit">
                <share />
            </el-icon>
            <el-icon color="#409efc" class="no-inherit">
                <edit />
            </el-icon>
            <edit style="width: 1em; height: 1em; margin-right: 8px" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { useLocaleStore } from "@/stores"
import { hookI18n } from "@/hooks"
import { useDark, useToggle, useFullscreen } from "@vueuse/core"

const isDark = useDark()

const localeState = useLocaleStore()
const { setLocale } = hookI18n()

const handleCommand1 = () => {
    const command = "en" as LanguageKey
    localeState.languageKey = command
    setLocale(command)
    // window.location.reload();
}

const handleCommand2 = () => {
    const command = "zh-CN" as LanguageKey
    localeState.languageKey = command
    setLocale(command)
}
</script>

<style scoped lang="scss">
label {
    margin: 5px;
    padding: 5px;
    color: red;
}
@media (min-width: 1024px) {
    .test {
        min-height: 100vh;
        display: flex;
        align-items: center;
    }
}
</style>
